<template>
    <el-card>
        <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom: 12px;" />
        <el-tree
      ref="treeRef"
      :data="deptOption"
      :props="{
        children: 'children',
        label: 'label',
      }"
      highlight-current
      default-expand-all
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    />
      </el-card>
</template>


<script setup>
import { ref, onMounted,watch,defineEmits } from 'vue'
import request from "@/utils/request";

const treeRef = ref(null);
const deptOption = ref([]);
const filterText = ref("");

watch(filterText, (val) => {
  treeRef.value.filter(val)
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}
const getDeptList = () => {
  request.get("/api/v1/dept/options").then(res => {
    console.log(res.data);
    deptOption.value = res.data;
  })
}

onMounted(() => {
  getDeptList();
})

const emit = defineEmits(["select"])
const handleNodeClick = (data) => {
  emit("select",data.value)
}

</script>